<template>
  <div class="app-container">
    <main class="main">
      <section class="windows"><!-- 窗口 -->
        <company_profile v-if="activeName === 'company_profile'"/>
        <home_image v-if="activeName === 'home_image'"/>
        <dev_history v-if="activeName === 'dev_history'"/>
        <company_honor v-if="activeName === 'company_honor'"/>
        <call_us v-if="activeName === 'call_us'"/>
      </section>
      <section class="tabs">
        <el-tabs tab-position="right"  v-model="activeName">
          <el-tab-pane v-for="tab in tabPages" :name="tab.page">
            <span class="page_text" slot="label"><i :class="tab.icon"/> {{tab.name}}</span>
          </el-tab-pane>
        </el-tabs>
      </section>
    </main>
  </div>
</template>

<script>

import call_us from "./call_us";
import company_honor from "./company_honor";
import company_profile from "./company_profile";
import dev_history from "./dev_history";
import home_image from "./home_image";

export default {
  name: "Jiayi_about_us",
  components: {call_us,company_honor,company_profile,dev_history,home_image},
  data() {
    return {
      activeName: 'home_image',
      tabPages:[
        {name: '首页图片', icon: 'el-icon-office-building',page: 'home_image'},
        {name: '公司简介', icon: 'el-icon-office-building',page: 'company_profile'},
        {name: '发展历程', icon: 'el-icon-tickets',page: 'dev_history'},
        {name: '资质荣誉', icon: 'el-icon-trophy',page: 'company_honor'},
        {name: '联系我们', icon: 'el-icon-phone-outline',page: 'call_us'},
      ]
    };
  },
  created() {

  },
  methods: {

  }
};
</script>
<style scoped>
.main{
  width: 100%;
  height: 85vh;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.windows{
  flex: 1;
}
.tabs{
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 13%;
  height: 100%;
}
.tabs .page_text{
  font-size: 1.5rem;
  font-weight: bold;
}
</style>
